<template>
	<div id="app">
		<el-tabs  v-model="activeName"  @tab-click="handleClick">
			<el-tab-pane :label="$t('home.haveInHand')" name="first">
			</el-tab-pane>
			<el-tab-pane :label="$t('home.previousActivities')" name="second">	
			</el-tab-pane>
		</el-tabs>
		<p>{{logotext}}</p>
		<div class="content">
			<div @click='toDetail(item.id)' class="liItem" v-for="(item,index) in dataNews">
				<div class="left">
					<p class="title">{{item.title}}</p>
					<p class="context">{{item.content}}</p>
					<p class="time">{{item.time}}</p>
					
				</div>
				<div class="right">
					<img src="../../../assets/logo.png" alt="">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {
				activeName:'first',
				dataNews: [{
					title: 'xinwen',
					content: 'asdadasdasdasdasdasd',
					time: '2000-11-21',
					img: '',
					id:3
				},{
					title: 'xinwen2',
					content: 'asdadasqe1331dasdasdasdasd',
					time: '2000-11-22',
					img: '',
					id:4
				},{
					title: 'xinwen3',
					content: 'asdadwqwewqsdaccdaasdasdasdasdasd',
					time: '2000-11-21',
					img: '',
					id:323
				}, ],
				logotext:'进行中'
			};
		},
		methods: {
			handleClick(tab) {
				this.logotext = tab.label
				// this.getInfo(tab.lable)
			},
			// 跳转到活动详情
			toDetail(rev){
				this.$router.push({
				        path:'/activityDetail',
				        query:{
				          id:rev
				        }
				      })
			},
			// 获取活动列表
			getInfo(){
				
			}
			
		},
	}
</script>

<style lang="scss" scoped="scoped">
	#app{
		padding: 40px 100px ;
	}
	.content{
		display: flex;
		flex-direction: column;
		.liItem{
			display: flex;
			flex-direction: row;
			height: 120px;
			box-sizing: border-box;
			padding: 10px;
			border-bottom: 1px solid #ccc;
			margin: 10px 0;
			.left{
				display: flex;
				flex-direction: column;
				flex:1;
				.title{
					font-size: 16px;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					// line-height: 14px;

				}
				.context{
					font-size: 10px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 12px;
					flex: 1;
				}
				.time{
					font-size: 8px;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #CCCCCC;
					line-height: 11px;

				}
			}
			.right{
				width: 100px;
				img{
					width: 100%;
				}
			}
		}
	}
	
</style>
